<template>
  <div class="jbo">
    <el-card class="box-card">
      <!-- 头部按钮 -->
      <el-form ref="addFrom" :model="addFrom" class="jbc">
        <el-row class="Dianji">
          <el-col :span="24">
            <el-row>
              <el-button class="btn el-icon-edit" type="success"
                ><span class="shiTi">新增试题</span></el-button
              >
            </el-row>
          </el-col>
        </el-row>
        <!-- 级联框 -->

        <el-row>
          <el-col :span="24" class="Hifht">
            <div class="grid-content bg-purple-dark">
              <el-col :span="6">
                <div class="block">
                  <el-col :span="6" class="gengG">
                    <el-form-item
                      class="Bianju"
                      label="学科"
                      prop="xuekeId"
                    ></el-form-item>
                    <!-- <span class="Bianju" prop="xuekeId">学科</span> -->
                  </el-col>
                  <el-col :span="18">
                    <el-select
                      v-model="addFrom.xuekeId"
                      placeholder="请选择"
                      @change="changeXueke"
                    >
                      <el-option
                        :label="xuekeItem.label"
                        :value="xuekeItem.value"
                        v-for="(xuekeItem, index) in xueke"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="block">
                  <el-col :span="6" class="gengG">
                    <el-form-item
                      class="Bianju"
                      label="二级目录"
                      prop="muluId"
                    ></el-form-item>
                    <!-- <span class="Bianju">二级目录</span> -->
                  </el-col>
                  <el-col :span="18">
                    <el-select
                      v-model="addFrom.muluId"
                      placeholder="请选择"
                      size="mini"
                    >
                      <el-option
                        :label="muluItem.directoryName"
                        :value="muluItem.directoryName"
                        v-for="(muluItem, index) in mulu"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="block">
                  <el-col :span="6" class="gengG">
                    <el-form-item
                      class="Bianju"
                      label="标签"
                      prop="biaotiId"
                    ></el-form-item>
                    <!-- <span class="Bianju">标签</span> -->
                  </el-col>
                  <el-col :span="18">
                    <el-select v-model="addFrom.biaotiId" placeholder="请选择">
                      <el-option
                        :label="muluItem.tagName"
                        :value="muluItem.tagName"
                        v-for="(muluItem, index) in biaoti"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-col>
                </div>
              </el-col>
              <!-- input -->
              <el-col :span="6">
                <div class="block">
                  <el-col :span="6" class="gengL">
                    <el-form-item
                      class="Bianju"
                      label="标签"
                      prop="value"
                    ></el-form-item>
                    <!-- <span class="Bianju">关键字</span> -->
                  </el-col>
                  <el-col :span="18">
                    <el-input v-model="addFrom.value" class="Block" />
                  </el-col>
                </div>
              </el-col>
            </div>
            <!-- input -->
          </el-col>
        </el-row>

        <!-- 级联框 -->
        <el-row>
          <el-col :span="24" class="Hifht">
            <div class="grid-content bg-purple-dark">
              <el-col :span="6">
                <div class="block">
                  <el-col :span="6" class="gengG">
                    <el-form-item
                      class="Bianju"
                      label="试题类型"
                      prop="questionType"
                    ></el-form-item>
                    <!-- <span class="Bianju">试题类型</span> -->
                  </el-col>
                  <el-col :span="18">
                    <el-select
                      v-model="addFrom.questionType"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="muluItem.label"
                        :value="muluItem.label"
                        v-for="(muluItem, index) in shitiType"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="block">
                  <el-col :span="6" class="gengG">
                    <el-form-item
                      class="Bianju"
                      label="难度"
                      prop="difficultyId"
                    ></el-form-item>
                    <!-- <span class="Bianju">难度</span> -->
                  </el-col>
                  <el-col :span="18">
                    <el-select
                      v-model="addFrom.difficultyId"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="muluItem.label"
                        :value="muluItem.label"
                        v-for="(muluItem, index) in nanduType"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="block">
                  <el-col :span="6" class="gengG">
                    <el-form-item
                      class="Bianju"
                      label="方向"
                      prop="directionId"
                    ></el-form-item>
                    <!-- <span class="Bianju">方向</span> -->
                  </el-col>
                  <el-col :span="18">
                    <el-select
                      v-model="addFrom.directionId"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="muluItem.direction"
                        :value="muluItem.direction"
                        v-for="(muluItem, index) in fangxiangType"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="block">
                  <el-col :span="6" class="gengG">
                    <el-form-item
                      class="Bianju"
                      label="录入人"
                      prop="luruId"
                    ></el-form-item>
                    <!-- <span class="Bianju">录入人</span> -->
                  </el-col>
                  <el-col :span="18">
                    <el-select v-model="addFrom.luruId" placeholder="请选择">
                      <el-option
                        :label="muluItem.username"
                        :value="muluItem.username"
                        v-for="(muluItem, index) in luru"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-col>
                </div>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <!-- 级联框加级联按钮 -->
        <el-row>
          <el-col :span="24" class="Hifht">
            <div class="grid-content bg-purple-dark">
              <!-- input -->
              <el-col :span="6">
                <div class="block">
                  <el-col :span="6" class="gengL">
                    <el-form-item
                      class="Bianju"
                      label="题目备注"
                      prop="valuE"
                    ></el-form-item>
                    <!-- <span class="Bianju"> </span> -->
                  </el-col>
                  <el-col :span="18">
                    <el-input v-model="addFrom.valuE" class="Block" />
                  </el-col>
                </div>
              </el-col>
              <!-- input -->
              <el-col :span="6">
                <div class="block">
                  <el-col :span="6" class="gengL">
                    <el-form-item
                      class="Bianju"
                      label="企业简称"
                      prop="valUe"
                    ></el-form-item>
                    <!-- <span class="Bianju">企业简称</span> -->
                  </el-col>
                  <el-col :span="18">
                    <el-input v-model="addFrom.valUe" class="Block" />
                  </el-col>
                </div>
              </el-col>
              <el-col :span="7" class="juli">
                <div class="block ">
                  <el-col :span="5" class="gengG">
                    <el-form-item
                      class="Bianju"
                      label="城市"
                      prop="cityId"
                    ></el-form-item>
                    <!-- <span class="Bianju">城市</span> -->
                  </el-col>
                  <el-col :span="8">
                    <el-select
                      class="size"
                      @change="getArea"
                      v-model="addFrom.cityId"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="muluItem.city"
                        :value="muluItem.city"
                        v-for="(muluItem, index) in cityData"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select
                      class="siZe"
                      v-model="addFrom.cityIdS"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="muluItem"
                        :value="muluItem"
                        v-for="(muluItem, index) in citys"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-col>
                </div>
              </el-col>
              <el-col :span="5">
                <el-row class="Dianji">
                  <el-button class="buttoN" @click="Clear">清除</el-button>
                  <el-button type="primary" class="buttoN">搜索</el-button>
                </el-row>
              </el-col>
            </div></el-col
          >
        </el-row>
      </el-form>
      <!-- 计数器 -->
      <el-alert :closable="false" show-icon>
        <template>
          <div>数据一共有 {{ total }} 条</div>
        </template>
      </el-alert>
      <!-- table表格 -->
      <el-table :data="getTike" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>

        <el-table-column prop="subject" label="学科" width="60">
        </el-table-column>

        <el-table-column prop="catalog" label="目录" width="70">
        </el-table-column>

        <el-table-column label="题型" width="70">
          <template slot-scope="scope">
            <div
              v-if="
                scope.row.questionType == '1' ? (msg = '单选') : (msg = '多选')
              "
            >
              {{ msg }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="题干" width="250">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>

        <el-table-column label="录入时间" width="190">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | relativeTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="难度" width="70">
          <template slot-scope="scope">
            <div
              v-if="
                scope.row.difficulty == '1' ? (res = '简单') : (res = '困难')
              "
            >
              {{ res }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="creator" label="录入人" width="102">
        </el-table-column>

        <el-table-column prop="date" label="操作" width="180" class="buttoN_a">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-view"
              class="Color_a"
              size="mini"
              circle
              @click="dialogVisibleA(scope.row.id)"
            ></el-button>
            <el-button
              icon="el-icon-edit"
              class="Color_b"
              size="mini"
              circle
            ></el-button>
            <el-button
              icon="el-icon-delete"
              class="Color_c"
              size="mini"
              circle
            ></el-button>
            <el-button
              icon="el-icon-check"
              class="Color_d"
              size="mini"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queruInfo.page"
          :page-sizes="[5, 10, 20, 50]"
          background="true"
          :page-size="queruInfo.pagesize"
          layout=" sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 弹出框 -->
      <el-dialog
        title="题目预览"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        :lock-scroll="false"
      >
        <span>题目预览</span>
        <div class="el-dialog__body" :data="bddFrom">
          <div data-v-a5b26568="" class="el-row">
            <div data-v-a5b26568="" class="el-col el-col-6">
              【题型】: {{ bddFrom.questionType }}
            </div>
            <div data-v-a5b26568="" class="el-col el-col-6">
              【编号】：{{ bddFrom.id }}
            </div>
            <div data-v-a5b26568="" class="el-col el-col-6">【难度】：简单</div>
            <div data-v-a5b26568="" class="el-col el-col-6">
              【标签】：{{ bddFrom.tags }}
            </div>
            <div data-v-a5b26568="" class="el-col el-col-6">
              【学科】：{{ bddFrom.subjectName }}
            </div>
            <div data-v-a5b26568="" class="el-col el-col-6">
              【目录】：{{ bddFrom.directoryName }}
            </div>
            <div data-v-a5b26568="" class="el-col el-col-6">
              【方向】：{{ bddFrom.direction }}
            </div>
          </div>
          <hr data-v-a5b26568="" />
          【题干】：

          <div v-html="bddFrom.question"></div>

          <div data-v-a5b26568="">
            <div data-v-a5b26568="" style="padding-bottom: 5px;">
              单选题 选项：（以下选中的选项为正确答案）
            </div>
            <div data-v-a5b26568="" style="padding: 8px 0px;">
              <label
                data-v-a5b26568=""
                role="radio"
                tabindex="0"
                class="el-radio"
                ><span class="el-radio__input"
                  ><span class="el-radio__inner"></span
                  ><input
                    type="radio"
                    aria-hidden="true"
                    tabindex="-1"
                    class="el-radio__original"
                    value="1"/></span
                ><span class="el-radio__label">1<!----></span></label
              ><!---->
            </div>
            <div data-v-a5b26568="" style="padding: 8px 0px;">
              <label
                data-v-a5b26568=""
                role="radio"
                aria-checked="true"
                tabindex="0"
                class="el-radio is-checked"
                ><span class="el-radio__input is-checked"
                  ><span class="el-radio__inner"></span
                  ><input
                    type="radio"
                    aria-hidden="true"
                    tabindex="-1"
                    class="el-radio__original"
                    value="1"/></span
                ><span class="el-radio__label">2<!----></span></label
              ><!---->
            </div>
            <div data-v-a5b26568="" style="padding: 8px 0px;">
              <label
                data-v-a5b26568=""
                role="radio"
                tabindex="0"
                class="el-radio"
                ><span class="el-radio__input"
                  ><span class="el-radio__inner"></span
                  ><input
                    type="radio"
                    aria-hidden="true"
                    tabindex="-1"
                    class="el-radio__original"
                    value="1"/></span
                ><span class="el-radio__label">3<!----></span></label
              ><!---->
            </div>
            <div data-v-a5b26568="" style="padding: 8px 0px;">
              <label
                data-v-a5b26568=""
                role="radio"
                tabindex="0"
                class="el-radio"
                ><span class="el-radio__input"
                  ><span class="el-radio__inner"></span
                  ><input
                    type="radio"
                    aria-hidden="true"
                    tabindex="-1"
                    class="el-radio__original"
                    value="1"/></span
                ><span class="el-radio__label">4<!----></span></label
              ><!---->
            </div>
          </div>
          <hr data-v-a5b26568="" />
          【参考答案】：<button
            data-v-a5b26568=""
            type="button"
            class="el-button el-button--danger el-button--small"
          >
            <!----><!----><span>视频答案预览</span>
          </button>
          <div data-v-a5b26568="" class="video" style="display: none;">
            <video
              data-v-a5b26568=""
              controls="controls"
              src="https://v-cdn.zjol.com.cn/277004.mp4"
            ></video>
          </div>
          <hr data-v-a5b26568="" />
          【答案解析】：
          <div data-v-a5b26568="" style="display: inline-block;"><p>无</p></div>
          <hr data-v-a5b26568="" />
          【题目备注】：无
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  list,
  getMuLu,
  getBiaoQian,
  getYongHu,
  getTiku,
  getTikus,
} from "@/api/questions.js";
import cityData from "@/api/citys";
export default {
  name: "ListIndex",
  components: {},
  props: {},
  data() {
    return {
      queruInfo: {
        page: 1,
        pagesize: 5,
      },
      total: 0,
      constA: null,
      res: "",
      msg: "",
      dialogVisible: false,
      userList: [],
      value: "",
      xuekeId: "",
      mulu: [],
      muluId: "",
      biaoti: [],
      biaotiId: "",
      xueke: [],
      questionType: "", //试题类型
      difficultyId: "",
      directionId: "",
      luru: [],
      luruId: "",
      valuE: "",
      cityData,
      cityId: "",
      cityIdS: "",
      valUe: "",
      addFrom: {
        xuekeId: "",
        muluId: null,
        biaotiId: "",
        difficultyId: "",
        directionId: "",
        directionId: "",
        luruId: "",
        valuE: "",
        valUe: "",
        cityIdS: "",
        less: null,
      },
      bddFrom: [],
      citys: [],
      Lingo: [],
      getTike: [],
      nanduType: [
        { type: 1, label: "简单" },
        { type: 2, label: "一般" },
        { type: 3, label: "困难" },
      ],
      shitiType: [
        { type: 1, label: "单选" },
        { type: 2, label: "多选" },
        { type: 3, label: "简单" },
      ],
      fangxiangType: [
        { direction: "o2o" },
        { direction: "外包服务" },
        { direction: "企业服务" },
        { direction: "互联网金融" },
        { direction: "企业咨询" },
        { direction: "互联网" },
        { direction: "电子商务" },
        { direction: "其他" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getWenzhan();
    this.getUserList();
    this.ongetYongHu();
  },
  mounted() {},
  methods: {
    async getUserList() {
      const data = await list();
      this.xueke = data.data;
    },
    getArea(value) {
      // console.log(this.cityData)
      const cityIndex = this.cityData.findIndex(function(item, index) {
        // console.log(item);

        return value == item.value;
      });
      if (value !== this.cityData) {
        this.addFrom.cityIdS = "";
      }
      this.Lingo = this.cityData.filter((item) => {
        return item.city === value;
      });

      this.citys = this.Lingo[0].area;
    },
    changeXueke() {
      this.onMuLu();
      this.onBiaoQian();
    },
    async onMuLu() {
      console.log(this.addFrom.xuekeId);
      try {
        const { data } = await getMuLu({
          subjectID: this.addFrom.xuekeId,
        });
        console.log(data.items);
        this.mulu = data.items;
        console.log(this.mulu);
      } catch (err) {
        console.log(err);
      }
    },
    async onBiaoQian() {
      try {
        const { data } = await getBiaoQian({
          subjectID: this.addFrom.xuekeId,
        });
        console.log(data.items);
        this.biaoti = data.items;
        // console.log(biaoti)
      } catch (err) {
        console.log(err);
      }
    },
    async ongetYongHu() {
      try {
        const { data } = await getYongHu();
        // console.log(data)
        this.luru = data;
      } catch (err) {
        console.log(err);
      }
    },
    // 回去文章列表
    async getWenzhan() {
      try {
        const { data } = await getTiku(this.queruInfo);
        this.total = data.counts;
        this.getTike = data.items;
        console.log(this.total);
      } catch (err) {
        console.log(err);
      }
    },
    handleSizeChange(val) {
      this.queruInfo.pagesize = val;

      console.log(this.queruInfo.pagesize);
      this.getWenzhan();
    },
    handleCurrentChange(val) {
      this.queruInfo.page = val;
      this.getWenzhan();
    },
    async dialogVisibleA(id) {
      this.dialogVisible = true;
      try {
        const { data } = await getTikus(id);
        this.bddFrom = data;
        if (this.bddFrom.questionType == "1") {
          this.bddFrom.questionType = "单选题";
        } else {
          this.bddFrom.questionType = "多选题";
        }
        if (this.bddFrom.difficulty == "1") {
          this.bddFrom.difficulty = "简单";
        } else {
          this.bddFrom.difficulty = "困难";
        }
        console.log(this.bddFrom);
      } catch (err) {
        console.log(err);
      }
    },
    Clear() {
      this.$refs.addFrom.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  width: 800px !important;
  border-radius: 10px;
  overflow: hidden;
}
/deep/.el-dialog__header {
  background-color: #409eff;
}
/deep/.el-dialog__close {
  color: #fff;
}
.el-alert {
  width: 100%;
  padding: 8px 16px;
  /deep/.el-alert__icon.is-big {
    font-size: 20px;
    width: 20px;
  }
}
.is-background {
  margin-top: 20px;
  text-align: right;
}
.Color_a {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}
.Color_a:hover {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}
.Color_b {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
}
.Color_b:hover {
  background: #67c23a;
  border-color: #67c23a;
  color: #fff;
}
.Color_c {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
.Color_c:hover {
  background: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}
.Color_d {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
}
.Color_d:hover {
  background: #e6a23c;
  border-color: #e6a23c;
  color: #fff;
}
/deep/.cell {
  font-size: 12px;
}
.jbo {
  padding: 20px !important;
}
/deep/.Bianju .el-form-item__label {
  line-height: 0px;
  padding: 0;
  float: none;
  vertical-align: bottom;
}
/deep/.Bianju {
  margin-right: 10px;
  font-size: 12px;
  // padding-left: 10px;
  // text-align: center;
  line-height: 15px;
  font-weight: 700;
  color: #606266;
}
/deep/.el-input__icon {
  line-height: 0;
}
.Block {
  width: 200px;
  height: 32px;
}
.gengG {
  text-align: right;
  line-height: 33px;
}
.gengL {
  text-align: right !important;
  line-height: 29px !important;
}
/deep/.jbc .size .el-input__inner {
  width: 95px !important;
  height: 32px !important;
}
/deep/.jbc .siZe .el-input__inner {
  width: 95px !important;
  height: 32px !important;
}
/deep/.jbc .el-input__inner {
  width: 200px !important;
  height: 32px !important;
}
.block {
  padding: 5px 0;
}
.buttoN {
  width: 56px;
  padding: 12px;
  font-size: 12px;
  text-align: center;
  line-height: 7px;
}
.Dianji {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: right;
  margin-right: 10px;
}
.btn {
  padding: 0;
  width: 97px;
  height: 32px;
  font-size: 12px;
}
.shiTi {
  margin-left: 5px;
}
.Hifht {
  margin: 5px 0;
}
</style>
